<template>
<div>
<div style="width: 1200px;margin: 0 auto">
  <el-card style="padding:0;margin: 5px 0">
    <h1 style="margin: 0">我的地址</h1>
    <el-divider></el-divider>
    <div style="position: relative" @click="myAddress">
      <i class="el-icon-location-outline" style="margin-right: 20px;font-size: 20px"></i>
    <span style="font-size: 20px;font-weight: bold;margin-right: 100px">{{consignee.nativePlace}}</span>
    <span style="font-size: 20px;font-weight: bold;margin-right: 100px">{{consignee.detailAddress}}</span>
    <span style="margin-right: 100px">{{consignee.name}}</span><span style="margin-right: 50px">{{consignee.phone}}</span>
    <el-button size="mini" type="info" v-show="consignee.isDefault==1">默认地址</el-button>
    <i class="el-icon-arrow-right" style="position: absolute;right: 30px;font-size: 25px"></i></div>
  </el-card>

  <el-card style="padding:0;margin: 5px 0">
    <h1 style="margin: 0">确认订单</h1>
  </el-card>

  <el-card style="padding:0;margin: 5px 0" v-for="p in productArr">
    <el-row>
    <el-col :span="6">
      <img :src="p.url" width="200" style="margin-left: 30px">
    </el-col>
    <el-col :span="18">
      <p style="margin: 0;font-size: 20px;font-weight: bold">{{p.name}}</p>
      <p>{{p.author}} 著</p>
      <p>{{p.publishing}} {{p.publishTime}} 出版</p>
      <p style="position: relative"><span style="font-size: 20px;color: red">￥{{ p.price }}</span><span style="position: absolute;right: 100px">×{{ p.count }}</span></p>
      <p style="position: relative"><span style="position: absolute;right: 100px">小计:<span style="font-size: 20px;color: red">￥{{(p.price*p.count).toFixed(2)}}</span></span></p>
    </el-col>
    </el-row>
  </el-card>
  <el-card style="padding:0;margin: 5px 0">
    <h1 style="margin: 0">价格明细</h1>
    <el-divider></el-divider>
    <div>
      <p style="font-size: 20px;position: relative">商品总价 <span style="font-size: 17px;color: #b1b1b1">共{{ num }}件宝贝</span><span style="color: red;position: absolute;right: 50px">￥{{sum}}</span></p>
      <p style="font-size: 20px;position: relative">运费<span style="position: absolute;right: 50px">免运费</span></p>
      <p style="font-size: 20px;position: relative">优惠券<span style="position: absolute;right: 50px">无</span></p>
      <p style="font-size: 20px;position: relative;top: 10px;margin-bottom: 0">合计<span style="color: red;position: absolute;right: 50px">￥{{sum}}</span></p>
    </div>
  </el-card>
  <div style="width:1200px;height:60px;background-color: white;margin: 10px auto;position: relative">
    <div style="font-size: 22px;height: 60px;line-height: 60px;font-weight: bold;position: absolute;right: 10px">合计:<span style="color: red;font-size: 28px;font-weight: bold">￥{{sum}}</span>
      <el-button style="background-color:#876c5f;color: white;position: relative;left: 10px;bottom:3px;
        height: 60px;font-size: 20px" @click="handleClear">提交订单</el-button>
    </div>
  </div>
</div>
</div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      consignee:{nativePlace:"山西省太原市小店区",detailAddress:"高新开发区高新国际A座24层",name:"张三",phone:"15035758973"},
      productArr:[{url:"imgs/gtszylcd.jpg",name:"钢铁是怎样炼成的",author:"奥斯特洛夫斯基",publishing:"中国教育出版社",publishTime:"2011-10-21",price:39.00,count:2},
        {url:"imgs/gtszylcd.jpg",name:"钢铁是怎样炼成的",author:"奥斯特洛夫斯基",publishing:"中国教育出版社",publishTime:"2011-10-21",price:39.00,count:2}],
      sum:0.00,
      num:0
    }
  },
  created() {
    let user = sessionStorage.getItem('user')
    if (user==null){
      location.href="/login"
    }else {
      let proArr = JSON.parse(sessionStorage.getItem('_pro'));
      if (proArr != null) {
        this.productArr = proArr.array
        let account = 0;
        for (let cart of this.productArr) {
          account = account + cart.price * cart.count
          this.num = cart.count + this.num
        }
        account = account.toFixed(2)
        this.sum = account
      } else {
        let ids = location.search.split("=")[1]
        console.log(ids)
        let cartUrl = 'http://localhost:8080/carts/clear?ids=' + ids
        axios.get(cartUrl).then((response) => {
          let json = response.data
          this.productArr = json.data
          const data = {array: this.productArr};
          sessionStorage.setItem('_pro', JSON.stringify(data));
          console.log(this.productArr)
          let account = 0;
          for (let cart of this.productArr) {
            account = account + cart.price * cart.count
            this.num = cart.count + this.num
          }
          account = account.toFixed(2)
          this.sum = account
        })

      }
      let consigneeUrl = 'http://localhost:8080/consignee/getDisplay'
      axios.get(consigneeUrl).then((response) => {
        let json = response.data
        this.consignee = json.data
      })
    }
  },
  methods:{
    myAddress(){
      location.href="/myAddress"
    }
  }
}
</script>
